<template>
	<div class="all-orders">
		<ul class="all-order-category">
			<li v-for="(item, index) in allOrderCategory" :key="index" @click="changeCategory(item)" :class="item.id == orderState ? 'li-active' : ''">{{item.name}}</li>
		</ul>
		<div class="all-order-list">
			<div class="all-order-item" v-for="(item, index) in allOrderList" :key="index">
				<div :style="item.style">
					<h2 @click="$router.push({name: 'order-detail', query: {order_id: item.order_id, order_state: $route.query.orders_id}})">
						<span class="order-number">订单编号：{{item.order_sn}}</span>
						<span class="order-status" :style="item.order_state == '40' ? 'color: #15C182;' : 'color: #DD4D00;'">{{item.order_state_title}}</span>
					</h2>
					<p class="test-items" @click="$router.push({name: 'order-detail', query: {order_id: item.order_id, order_state: $route.query.orders_id}})">{{item.test_project}}</p>
					<p class="order-money">
						订单金额：
						<span>{{item.order_amount}}</span>
					</p>
					<p class="express-information" v-if="item.express_name != '' && item.shipping_code != ''">快递信息：{{item.express_name}} {{item.shipping_code}}</p>
					<button class="all-order-item-btn" v-if="item.order_state == '10'" @click="deleteItem(item)">取消订单</button>
					<button class="all-order-item-pay-btn all-order-item-btn" v-if="item.order_state == '10'" @click="buyAgain(item.order_id)">立即支付</button>
					<button class="all-order-item-btn" v-if="item.order_state == '20' && item.shipping_code == ''" @click="addExpress(item)">填写快递信息</button>
					<a :href="item.report_url" class="all-order-item-btn" v-if="item.order_state == '40' && item.report_path != ''">下载检测报告</a>
				</div>
			</div>
			<div class="loading" v-if="allOrderList.length < 1 && isLoading">加载中...</div>
			<div class="nothing" v-if="allOrderList.length < 1 && !isLoading">暂无数据</div>
			<!-- <van-pagination v-model="curpage" :page-count="curpage" mode="simple" /> -->
			<div class="see-more" v-show="showFlag && allOrderList.length > 0" @click="getMore">查看更多</div>
			<div class="no-data" v-show="!showFlag && allOrderList.length > 0">没有更多了</div>
		</div>
	</div>
</template>
<script>
	import {
		orderList,
		orderCancel,
		orderBuyAgain
	} from "@/api/common";
	import {
		Dialog,
		Toast
	} from "vant";
	export default {
		name: "mine",
		data() {
			return {
				allOrderCategory: [{
						name: "待付款",
						id: "10",
					},
					{
						name: "待检测",
						id: "20",
					},
					{
						name: "检测中",
						id: "30",
					},
					{
						name: "已完成",
						id: "40",
					},
				],
				allOrderList: [],
				orderState: this.$route.query.orders_id,
				key: localStorage.getItem("userKey"),
				// key: 'aa3ab733b690faa86c271f6bbd91db41',
				curpage: 1,
				isLoading: true,
				showFlag: true,
				pageTotal: "",
				canSubmit: true,
			};
		},
		mounted() {
			this.getOrderList(this.orderState, this.curpage);
		},
		methods: {
			getMore() {
				this.curpage = this.curpage + 1;
				this.getOrderList(this.orderState, this.curpage);
			},
			addExpress(item) {
				this.$router.push({
					name: "express",
					query: {
						order_id: item.order_id,
					},
				});
			},
			deleteItem(item) {
				Dialog.confirm({
						title: "提示",
						message: "是否确认取消订单",
					})
					.then(() => {
						// on confirm
						orderCancel({
							order_id: item.order_id,
							key: this.key,
						}).then((res) => {
							Toast("取消成功");
							this.allOrderList = [];
							this.getOrderList(this.orderState);
						});
					})
					.catch(() => {
						// on cancel
					});
			},
			changeCategory(item) {
				this.orderState = item.id;
				this.showFlag = true;
				this.isLoading = true;
				this.allOrderList = [];
				this.$router.push({
					query: {
						orders_id: this.orderState
					}
				})
				this.getOrderList(this.orderState, this.curpage);
			},
			getOrderList(orderState, curpage) {
				orderList({
					order_state: orderState,
					key: this.key,
					curpage: curpage,
				}).then((res) => {
					// this.allOrderList = res.data.datas.order_list;
					this.pageTotal = res.data.page_total;
					this.isLoading = false;
					if (this.allOrderList.length > 0) {
						this.allOrderList = this.allOrderList.concat(
							res.data.datas.order_list
						);
						this.allOrderList.map((item, index) => {
							if (item.order_state == "10") {
								item.style = "padding-bottom: 55px;";
							} else if (item.order_state == "40") {
								if (item.report_path == "") {
									item.style = "padding-bottom: 15px;";
								} else {
									item.style = "padding-bottom: 55px;";
								}
							} else if (item.order_state == "20") {
								if (item.shipping_code == "") {
									item.style = "padding-bottom: 55px;";
								} else {
									item.style = "padding-bottom: 15px;";
								}
							} else {
								item.style = "padding-bottom: 15px;";
							}
						});
					} else {
						this.allOrderList = res.data.datas.order_list;
						this.allOrderList.map((item, index) => {
							if (item.order_state == "10") {
								item.style = "padding-bottom: 55px;";
							} else if (item.order_state == "40") {
								if (item.report_path == "") {
									item.style = "padding-bottom: 15px;";
								} else {
									item.style = "padding-bottom: 55px;";
								}
							} else if (item.order_state == "20") {
								if (item.shipping_code == "") {
									item.style = "padding-bottom: 55px;";
								} else {
									item.style = "padding-bottom: 15px;";
								}
							} else {
								item.style = "padding-bottom: 15px;";
							}
						});
					}
					if (this.curpage >= this.pageTotal) {
						this.showFlag = false;
					}
				});
			},
			buyAgain(orderId) {
				if (this.canSubmit) {
					this.canSubmit = false;
				} else {
					return
				}
				let data = {
					order_id: orderId,
					key: this.key,
				};
				orderBuyAgain(data)
					.then((res) => {
						this.canSubmit = true;
						let code = res.data.code;
						if (code == 200) {
							let config = res.data.datas.mp_data;
							// 判断一下 config 如果没有数据的情况
							if (typeof WeixinJSBridge == "undefined") {
								if (document.addEventListener) {
									document.addEventListener(
										"WeixinJSBridgeReady",
										this.onBridgeReady(config),
										false
									);
								} else if (document.attachEvent) {
									document.attachEvent(
										"WeixinJSBridgeReady",
										this.onBridgeReady(config)
									);
									document.attachEvent(
										"onWeixinJSBridgeReady",
										this.onBridgeReady(config)
									);
								}
							} else {
								this.onBridgeReady(config);
							}
						} else {
							this.$toast(res.data.message);
						}
					})
					.catch((error) => {});
			},
			onBridgeReady(config) {
				WeixinJSBridge.invoke(
					"getBrandWCPayRequest", {
						appId: config.appId, //公众号名称，由商户传入
						timeStamp: config.timeStamp, //时间戳，自1970年以来的秒数
						nonceStr: config.nonceStr, //随机串
						package: config.package,
						signType: config.signType, //微信签名方式：
						paySign: config.paySign, //微信签名
					},
					(res) => {
						if (res.err_msg == "get_brand_wcpay_request:ok") {
							// 支付成功
							this.$router.push({
								name: "pay-notify",
								query: {
									pay: 1,
								},
							});
						} else {
							//支付失败
							this.$router.push({
								name: "pay-notify",
								query: {
									pay: 0,
								},
							});
						}
					}
				).catch((error) => {});
			},
		},
		computed: {
			isNothing() {
				return this.allOrderList.length == 0 && !this.isLoading;
			},
		},
	};
</script>
<style scoped>
	.all-orders {
		width: 100%;
		min-height: 100%;
		background: #f0f0f0;
	}
	.all-order-category {
		width: 100%;
		background: #fff;
		height: 47px;
		display: flex;
		align-items: center;
	}
	.all-order-category li {
		width: 25%;
		height: 100%;
		text-align: center;
		line-height: 47px;
		font-size: 14px;
		position: relative;
		color: #999;
	}
	.li-active {
		color: #15c182 !important;
	}
	.li-active::before {
		position: absolute;
		left: 34%;
		bottom: 0;
		content: "";
		width: 35px;
		height: 2px;
		background: #15c182;
	}
	.all-order-list {
		width: 100%;
		padding: 15px;
		box-sizing: border-box;
	}
	.all-order-item {
		width: 100%;
	}
	.all-order-item div {
		width: 100%;
		border-radius: 10px;
		background: #fff;
		box-shadow: -1px 4px 10px 0px #e3f5f2;
		padding: 15px 15px 55px;
		box-sizing: border-box;
		position: relative;
		margin-bottom: 15px;
	}
	.all-order-item h2 {
		display: flex;
		justify-content: space-between;
		/* align-items: center; */
		margin-bottom: 5px;
	}
	.order-number {
		font-size: 16px;
		color: #333;
		display: block;
		width: 80%;
		line-height: 1.5;
	}
	.order-status {
		font-size: 14px;
		color: #dd4d00;
		line-height: 1.5;
	}
	.test-items {
		font-size: 14px;
		color: #666;
		line-height: 1.8;
		margin-bottom: 5px;
	}
	.order-money {
		font-size: 14px;
		color: #656565;
		margin-bottom: 5px;
	}
	.order-money span {
		color: #ef2739;
	}
	.express-information {
		font-size: 14px;
		color: #656565;
	}
	.all-order-item-btn {
		padding: 10px 15px;
		box-sizing: border-box;
		border-radius: 30px;
		border: 1px solid #d9d9d9;
		font-size: 14px;
		color: #656565;
		background: transparent;
		position: absolute;
		right: 15px;
		bottom: 15px;
	}
	.all-order-item-pay-btn {
		right: 120px;
	}
	.loading,
	.nothing {
		width: 100%;
		height: 291px;
		line-height: 200px;
		text-align: center;
		color: #999;
		font-size: 14px;
	}
	.no-data {
		font-size: 12px;
		color: #999;
		text-align: center;
	}
	.see-more {
		width: 100%;
		margin: 0 auto;
		background: transparent;
		color: #999;
		margin: 10px 0;
		font-size: 12px;
		text-align: center;
	}
</style>